<script setup>
 import { Edit,Delete } from '@element-plus/icons-vue';
 import ChannelSelect from './components/ChannelSelect.vue'
 import {artGetListService,artDeleteService} from '@/api/article' //导入获取文章
 import {formatTime} from '@/utils/format'
 import { ref } from 'vue'
 import ArticleEdit from './components/ArticleEdit.vue';
import { ElMessage } from 'element-plus';

const articleList = ref([]) //文章列表
const total=ref(0) //总条数
const loading=ref(false) //loading状态
const articleEditRef=ref()

// 定期请求参数对象
const params=ref({
    pagenum:1, //当亲页
    pagesize:5, //当前生效额每页条数
    cate_id:'',
    state:''
})

// 获取文章列表
const getArticleList = async () =>{
    // loading.value = true //开启loading效果
    // const res=await artGetListService(params.value)
    // console.log(res);
    // articleList.value=res.data.data
    // total.value=res.data.total
    // loading.value = false //开启loading效果
}
getArticleList()

// 处理分页逻辑
const handleSizeChange=(size)=>{
    console.log('当前每页条数',size);
    // 如果每页条数发生变化 就要把当前跳到第一页；并且每页条数设置成要变成的条数
    params.value.pagenum=1
    params.value.pagesize=size
    // 重新渲染
    getArticleList()
}

const handleCurrentChange=(page)=>{
    console.log('页码变化了',page);
    params.value.pagenum=page
   // 重新渲染
   getArticleList()
}
// 搜索逻辑=>按照最新的搜索条件 ，重新检索 ，从第一页开始展示
const onSearch=()=>{
    params.value.pagenum=1
    getArticleList()
}

const onReset=()=>{
    params.value.pagenum=1
    params.value.cate_id='',
    params.value.state='',
    getArticleList()
}

// 添加文章
const onAddAritcle=()=>{
    articleEditRef.value.open({})
}
// 编辑文章
const onEditArticle=(row)=>{
    articleEditRef.value.open(row)
}
// 删除文章
const onDeleteArticle= async (row)=>{
    // console.log(row.id);
    // await artDeleteService(row.id)
    // ElMessage.success('删除成功！')
    // getArticleList()

}
// 监听子组件 (添加或者编辑成功的回调)
const onsuccess=(type)=>{
    if(type==='add'){
        // 渲染最后一页 总条数 ÷ 每页页码条数 的和 再向上取整
        const lastPage=Math.ceil((total.value+1) / params.value.pagesize)
        params.value.pagenum=lastPage //更新成当前页码
    }
    getArticleList()
    
}
</script>

<template>
      <page-container title="文章管理">
        <template #extra>
            <el-button type="primary" @click="onAddAritcle">添加文章</el-button>
        </template>
        <!-- 表单区域 -->
        <el-form inline>
            <el-form-item label="文章分类:" >
                <!-- 封装的组件 -->
                <!--V2中 v-model 是:value 和@input的简写 -->
                <!--V3中是 :modelValue 和 @updata:modelValue 简写  -->
              <ChannelSelect v-model="params.cate_id"></ChannelSelect>
            </el-form-item>
            <el-form-item label="发布状态:">
                 <!-- lable是展示给用户看的 value是提交给后台的 -->
                 <el-select style="width: 240px" v-model="params.state">
                    <el-option label="已发布" value="已发布"></el-option>
                    <el-option label="草稿" value="草稿"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
                <el-button @click="onReset">重置</el-button>
            </el-form-item>
        </el-form>

        
        <!-- 表格区域 -->
        <el-table :data="articleList" v-loading="loading">
            <el-table-column label="文章标题" prop="title">
                <template #default="{row}">
                    <el-link  type="primary" :underline="false">{{ row.title }}</el-link>
                </template>
            </el-table-column>
            <el-table-column label="分类" prop="cate_name"></el-table-column>
            <el-table-column label="发布时间" prop="pub_date">
                <template #default="{row}">
                    {{ formatTime(row.pub_date) }}
                </template>
            </el-table-column>
            <el-table-column label="状态" prop="state"></el-table-column>
            <el-table-column label="操作">
                <template #default="{row}">
                    <el-button circle type="primary" plain :icon="Edit" @click="onEditArticle(row)"></el-button>
                    <el-button circle type="danger" plain :icon="Delete" @click="onDeleteArticle(row)"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页区域 -->
        <el-pagination
            v-model:current-page="params.pagenum"  
            v-model:page-size="params.pagesize"
            :page-sizes="[1, 2, 3, 4]"
             :disabled="false"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            style="margin-top: 20px; justify-content: flex-end;"
        />

        <!-- 抽屉组件 -->
        <ArticleEdit ref="articleEditRef" @success="onsuccess"></ArticleEdit>
       
    </page-container>
</template>

<style lang="scss" scoped>

</style>